<!--
 * @Author: misuzu 1411498103@qq.com
 * @Date: 2025-03-03 17:36:31
 * @LastEditors: misuzu 1411498103@qq.com
 * @LastEditTime: 2025-03-03 19:41:40
 * @FilePath: \vite11\src\components\PageFooter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page-footer">
    <router-link to="/" class="footer-item">
      <svg t="1740036420057" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7469" width="200" height="200"><path d="M511.707 298.862L893.88 636.928 894.39 1024H134.07l-0.366-387.072 378.002-338.066z m124.636 513.463h-253.22v211.602h253.22V812.325zM512 0l95.086 80.238 225.28 189.879L1024 431.762l-86.894 96.183L512 160.402 85.87 527.945 0 431.762 416.914 80.238 512 0z" p-id="7470"></path></svg>
      <span>首页</span>
    </router-link>
    <router-link to="/cart" class="footer-item">
      <svg t="1740036394657" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6318" width="200" height="200"><path d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z" p-id="6319"></path></svg>
      <span>购物车</span>
    </router-link>
    <router-link to="/orders" class="footer-item">
     <svg t="1740036035545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4249" width="200" height="200"><path d="M800.037628 928.016126 223.962372 928.016126c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-639.892491c0-52.980346 43.003528-95.983874 95.983874-95.983874l575.903242 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 639.892491C896.021502 884.840585 852.84596 928.016126 800.037628 928.016126zM223.962372 159.973123c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 639.892491c0 17.717453 14.449185 31.994625 31.994625 31.994625l575.903242 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-639.892491c0-17.545439-14.277171-31.994625-31.994625-31.994625L223.962372 159.973123z" fill="#575B66" p-id="4250"></path><path d="M640.924576 544.768688 287.779607 544.768688c-17.717453 0-31.994625-14.277171-31.994625-31.994625 0-17.717453 14.277171-31.994625 31.994625-31.994625l353.144969 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C672.9192 530.491517 658.642029 544.768688 640.924576 544.768688z" fill="#575B66" p-id="4251"></path><path d="M734.84428 735.532337l-447.236687 0c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l447.236687 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S752.561734 735.532337 734.84428 735.532337z" fill="#575B66" p-id="4252"></path><path d="M255.784982 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S255.784982 278.834873 255.784982 305.325046z" fill="#575B66" p-id="4253"></path><path d="M463.061986 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S463.061986 278.834873 463.061986 305.325046z" fill="#575B66" p-id="4254"></path><path d="M671.199059 305.325046c0 26.490173 21.501764 47.991937 47.991937 47.991937s47.991937-21.501764 47.991937-47.991937-21.501764-47.991937-47.991937-47.991937S671.199059 278.834873 671.199059 305.325046z" fill="#575B66" p-id="4255"></path></svg>
      <span>ai客服</span>
    </router-link>
    <router-link to="/profile" class="footer-item">
   <svg t="1740036369085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" width="200" height="200"><path d="M232.406 487.311c-2.678 0-4.791 0.387-6.448 1.051 2.252-0.677 4.655-1.051 7.124-1.051h-0.677zM972 781.983c0.069-1.366 0.25-2.707 0.54-4.004-0.317 0.595-0.483 1.863-0.54 4.004zM1021.338 237.615c0.015-0.055 0.015-0.124 0.015-0.18v-0.636c0 0.275 0 0.551-0.015 0.815zM971.971 237.531c0 0.055 0 0.11 0.015 0.166-0.015-0.29-0.015-0.595-0.015-0.897v0.732zM1001.747 977.937c-9.689-70.651-33.377-134.229-68.234-190.125 18.593 32.571 13.829 23.582 8.775 14.772-0.021-0.051-0.058-0.092-0.102-0.123-21.852-37.050-48.723-71.487-80.042-102.224l-0.015-0.015c-6.809-6.684-13.822-13.2-21.044-19.526-51.492-45.126-110.937-78.585-174.332-98.938 11.474-6.352 22.577-13.477 33.238-21.361 12.138-8.948 23.695-18.891 34.563-29.758 57.152-57.152 88.637-133.154 88.637-213.988 0-80.834-31.483-156.836-88.637-213.988-56.117-56.117-130.406-87.476-209.584-88.608-1.258-0.015-2.512-0.027-3.77-0.027-1.258 0-2.512 0.015-3.77 0.027-79.178 1.132-153.466 32.492-209.584 88.608-57.152 57.152-88.637 133.154-88.637 213.988 0 80.834 31.483 156.836 88.637 213.988 10.868 10.868 22.426 20.81 34.563 29.758 10.661 7.885 21.762 15.011 33.238 21.361-63.395 20.354-122.841 53.811-174.332 98.938-7.222 6.324-14.236 12.841-21.044 19.526-31.345 30.765-58.243 65.23-80.158 102.362-5.054 8.81-9.818 17.799-14.319 26.941-28.404 56.429-46.198 122.609-49.003 192.646 1.638-27.665 13.265-12.432 29.822-10.21 1.366 0.18 2.734 0.275 4.075 0.275 1.228 0 2.429-0.069 3.631-0.221 11.973-2.609 21.638-12.372 23.516-25.201 13.946-95.719 59.569-182.7 125.146-248.939 77.824-78.64 183.749-128.061 298.221-128.253h0.649c114.223 0.387 219.899 49.766 297.571 128.253 65.575 66.239 111.2 153.217 125.146 248.939 1.878 12.8 11.502 22.549 23.446 25.187 0.027 0 0.041 0.015 0.069 0.015 1.201 0.151 2.403 0.221 3.631 0.221 1.341 0 2.707-0.097 4.075-0.275 16.556-2.222 28.182-17.455 25.959-34.025zM520.551 558.755c-0.607 0-1.216 0-1.823-0.015-112.953-0.83-213.658-79.302-241.177-184.563-0.305-1.146-0.607-2.306-0.885-3.465-4.308-17.398-6.602-35.487-6.602-54.061s2.292-36.868 6.602-54.572c0.275-1.187 0.58-2.362 0.885-3.535 27.671-107.899 129.316-193.662 242.999-193.662h1.298c113.685 0 215.328 85.764 242.999 193.662 0.305 1.173 0.607 2.348 0.885 3.535 4.308 17.702 6.602 35.998 6.602 54.572 0 18.572-2.292 36.661-6.602 54.061-0.275 1.161-0.58 2.319-0.885 3.465-27.521 105.262-128.225 183.735-241.177 184.563-1.036 0.015-2.071 0.015-3.121 0.015z" fill="" p-id="5262"></path></svg>
      <span>我</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'PageFooter',
};
</script>

<style>
.page-footer {
  display: flex;
  justify-content: space-around;
  align-items: center; /* 垂直居中 */
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px; /* 增加高度 */
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.footer-item {
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  height: 100%; /* 高度占满 */
  color: #666; /* 文字颜色 */
  text-decoration: none; /* 去除下划线 */
}

.footer-item .icon {
  width: 24px; /* 图标宽度 */
  height: 24px; /* 图标高度 */
  fill: currentColor; /* 使用当前文字颜色 */
}

.footer-item span {
  margin-top: 4px; /* 文字与图标的间距 */
  font-size: 12px; /* 文字大小 */
}

/* 活当前/activeers/active/other/index?memCard0f24a555c1bc40079ac43f5ffa */
/* 活跃状态样式 */
.router-link-active .footer-item {
  color: #1aad19; /* 活跃状态颜色 */
}
</style>
